<template>
  <div>
    <div
      style="
        width: 100%;
        height: 50px;
        margin: 20px;
        font-size: 16px;
        color: dimgrey;
      "
      id="accountDiv"
    >
      负责人：{{ this.$route.query.accountName }}
    </div>
    <div ref="line" style="width: 100%; height: 500px; margin-top: 50px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import bugApi from '@/api/core/bug'

const option = {
  title: {
    text: '缺陷数量面积图',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    left: 'left',
    // data: [],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '5%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#434344', // 更改坐标轴文字颜色
        fontSize: 12, // 更改坐标轴文字大小
      },
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0', // 更改坐标轴颜色
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      textStyle: {
        color: '#434344', // 更改坐标轴文字颜色
        fontSize: 12, // 更改坐标轴文字大小
      },
    },
    axisLine: {
      lineStyle: {
        color: '#ffffff', // 更改坐标轴颜色
      },
    },
  },
  series: [
    {
      name: '新增数量',
      data: [],
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      label: {
        show: true,
        position: 'top',
        formatter: '{c}',
      },
    },
    {
      name: '关闭数量',
      data: [],
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      label: {
        show: true,
        position: 'top',
        formatter: '{c}',
      },
    },
  ],
}

export default {
  name: 'DevCharts',
  data() {
    return {
      searchCondition: {
        accountId: '',
        startDate: '',
        endDate: '',
      },
    }
  },
  created() {
    const query = this.$route.query
    if (!query.accountId) {
      this.$message({ type: 'error', message: '缺少accountId参数' })
      return
    }
    this.searchCondition.accountId = query.accountId
    this.searchCondition.startDate = query.startDate
    this.searchCondition.endDate = query.endDate
  },
  mounted() {
    // 折线图
    // const lineDiv = document.getElementById('line')
    // const lineChart = echarts.init(lineDiv)
    const lineChart = echarts.init(this.$refs.line);

    bugApi
      .getLineChartData(this.searchCondition)
      .then((response) => {
        option.xAxis.data = response.data?.xAxis || []
        option.series[0].data = response.data?.create?.map((v) => v.value) || []
        option.series[1].data = response.data?.closed?.map((v) => v.value) || []
        lineChart.setOption(option)
      })
      .catch((error) => {
        console.error('获取研发折线图数据失败', error)
      })
  },
  methods: {},
}
</script>

<style scoped></style>
